<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body style="margin: 0px;">
    <div class="container" style="height: 500px; overflow-y: scroll; background: skyblue;">
        <div class="view" style="height:5000000px">
            <ul class="ul">
            </ul>
        </div>
    </div>
    <script>
        const totalData = Array(100000).fill(0).map((item, index) => index)
        const initData = Array(10).fill(0).map((item, index) => index)

        const container = document.querySelector('.container')
        const view = document.querySelector('.view')
        const ul = document.querySelector('ul')

        const init = (data, offset = 0) => {
            ul.innerHTML = ''
            data.forEach(item => {
                const li = document.createElement('li')
                li.style = 'width: 100%; height: 50px; border: 1px solid black; text-align: center; line-height: 50px;'
                li.innerHTML = item + 1
                ul.appendChild(li)
            })
            ul.style.transform = `translateY(${offset}px)`
        }

        init(initData)

        container.addEventListener('scroll', function(e) {
            const scrollTop = e.target.scrollTop

            const startSlice = Math.floor(scrollTop / 50)
            const data = totalData.slice(startSlice, startSlice + 10)
            const offset = scrollTop - (scrollTop % 50)
            init(data, offset)
        })
    </script>
</body>

</html>